<template>
  <el-dialog
    v-model="visible"
    :title="title"
    :width="width"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    class="confirm-dialog"
  >
    <div class="confirm-content">
      <div class="icon-container">
        <el-icon 
          class="confirm-icon" 
          :class="iconClass"
          :size="iconSize"
        >
          <component :is="iconComponent" />
        </el-icon>
      </div>
      <div class="message-container">
        <div class="message-title">{{ messageTitle }}</div>
        <div v-if="message" class="message-text">{{ message }}</div>
        <div v-if="$slots.default" class="message-slot">
          <slot />
        </div>
      </div>
    </div>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel" :disabled="loading">
          {{ cancelText }}
        </el-button>
        <el-button 
          :type="confirmType" 
          @click="handleConfirm"
          :loading="loading"
        >
          {{ confirmText }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { 
  WarningFilled, 
  InfoFilled, 
  SuccessFilled, 
  CircleCloseFilled,
  QuestionFilled
} from '@element-plus/icons-vue'

export interface ConfirmDialogProps {
  modelValue?: boolean
  title?: string
  message?: string
  messageTitle?: string
  type?: 'warning' | 'info' | 'success' | 'error' | 'question'
  confirmText?: string
  cancelText?: string
  confirmType?: 'primary' | 'success' | 'warning' | 'danger' | 'info'
  width?: string | number
  loading?: boolean
  iconSize?: number
}

const props = withDefaults(defineProps<ConfirmDialogProps>(), {
  modelValue: false,
  title: '确认操作',
  messageTitle: '确定要执行此操作吗？',
  type: 'warning',
  confirmText: '确定',
  cancelText: '取消',
  confirmType: 'primary',
  width: '420px',
  loading: false,
  iconSize: 48
})

const emit = defineEmits<{
  'update:modelValue': [value: boolean]
  'confirm': []
  'cancel': []
}>()

const visible = ref(props.modelValue)

// 图标配置
const iconConfig = {
  warning: { component: WarningFilled, class: 'warning' },
  info: { component: InfoFilled, class: 'info' },
  success: { component: SuccessFilled, class: 'success' },
  error: { component: CircleCloseFilled, class: 'error' },
  question: { component: QuestionFilled, class: 'question' }
}

const iconComponent = computed(() => iconConfig[props.type].component)
const iconClass = computed(() => `icon-${iconConfig[props.type].class}`)

// 监听 modelValue 变化
watch(() => props.modelValue, (val) => {
  visible.value = val
})

// 监听 visible 变化
watch(visible, (val) => {
  emit('update:modelValue', val)
})

const handleConfirm = () => {
  emit('confirm')
}

const handleCancel = () => {
  visible.value = false
  emit('cancel')
}

// 暴露方法
defineExpose({
  close: () => {
    visible.value = false
  }
})
</script>

<style scoped>
.confirm-dialog {
  --el-dialog-border-radius: 12px;
}

.confirm-content {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 0;
}

.icon-container {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.confirm-icon {
  border-radius: 50%;
  padding: 8px;
}

.confirm-icon.icon-warning {
  color: #e6a23c;
  background-color: #fdf6ec;
}

.confirm-icon.icon-info {
  color: #409eff;
  background-color: #ecf5ff;
}

.confirm-icon.icon-success {
  color: #67c23a;
  background-color: #f0f9ff;
}

.confirm-icon.icon-error {
  color: #f56c6c;
  background-color: #fef0f0;
}

.confirm-icon.icon-question {
  color: #909399;
  background-color: #f4f4f5;
}

.message-container {
  flex: 1;
  min-width: 0;
}

.message-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 8px;
  line-height: 1.4;
}

.message-text {
  font-size: 14px;
  color: #606266;
  line-height: 1.5;
  margin-bottom: 8px;
}

.message-slot {
  font-size: 14px;
  color: #606266;
  line-height: 1.5;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* 响应式设计 */
@media (max-width: 480px) {
  .confirm-content {
    flex-direction: column;
    text-align: center;
  }
  
  .icon-container {
    align-self: center;
  }
  
  .dialog-footer {
    flex-direction: column-reverse;
  }
  
  .dialog-footer .el-button {
    width: 100%;
  }
}
</style>
